<template>
	<view>
		<uni-collapse ref="add" class="warp">
			<uni-collapse-item v-for="(sub, key) in list" :key="key" :open="sub.open" :show-animation="sub.showAnimation" :disabled="sub.disabled" :title="sub.title">
				<view class="content" v-html="sub.content"></view>
			</uni-collapse-item>
		</uni-collapse>
	</view>
</template>

<script>
	import uniCollapse from '@/components/uni-collapse/uni-collapse.vue'
	import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue'
	import uniList from '@/components/uni-list/uni-list.vue'
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
	import htmlParser from '@/common/html-parser'
	export default {
		components: {
			uniCollapse,
			uniCollapseItem,
			uniList,
			uniListItem
		},
		data() {
			return {
				list: []
			}
		},
		onLoad(){
			this.loadData();
		},
		methods: {
			loadData(){
				uni.showLoading({
					title: 'loading'
				});
				var that=this;
				this.$api.ajax('index/question', {}, function(res) {
					uni.hideLoading();
					var data = res[1].data;
					if (data.statusCode == 200) { 
						console.log(data.data)
						that.list=data.data;
						for(var i=0; i<data.data.length; i++){
							var item=data.data[i];
							var reg = new RegExp("(<img.*src=\"\.*?\>)");
							//匹配图片（g表示匹配所有结果i表示区分大小写）
							var imgReg = /<img.*?(?:>|\/>)/gi;
							//匹配src属性
							var srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i;
							var arr = item.content.match(imgReg);
							if(arr){
								for (var j = 0; j < arr.length; j++) {
									 var src = arr[j].match(srcReg);
									 //获取图片地址
									 if(src[1]){
									  if(src[1].indexOf('http')<0 && src[1].indexOf('https')<0){
										  item.content=item.content.replace(src[1],that.$url+src[1]);
									  }
									 }
								
								}
							}
							
							var htmls = item.content.replace(/\\/g, "").replace(/\<img/gi, '<img style="max-width:100%;height:auto" ');
							data.data[i].content = htmlParser(htmls);
							
						}
						console.log("Success",data.data);
					} else {
						that.$api.msg('服务端发生错误');
					}
				});
			}
		}
	}
</script>

<style>
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4
	}

	view {
		font-size: 28upx;
		line-height: inherit
	}

	.example {
		padding: 0 30upx 30upx
	}

	.example-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 32upx;
		color: #464e52;
		padding: 30upx;
		margin-top: 20upx;
		position: relative;
		background-color: #fdfdfd
	}

	.example-title__after {
		position: relative;
		color: #031e3c
	}

	.example-title:after {
		content: '';
		position: absolute;
		left: 0;
		margin: auto;
		top: 0;
		bottom: 0;
		width: 10upx;
		height: 40upx;
		border-top-right-radius: 10upx;
		border-bottom-right-radius: 10upx;
		background-color: #031e3c
	}

	.example .example-title {
		margin: 40upx 0
	}

	.example-body {
		border-top: 1px #f5f5f5 solid;
		padding: 30upx;
		background: #fff
	}

	.example-info {
		padding: 30upx;
		color: #3b4144;
		background: #fff
	}

	.content {
		padding: 30upx;
		background: #f9f9f9;
		color: #666;
	}

	.button {
		font-size: 26upx;
		line-height: 90upx;
	}
</style>